<template>
  <div style="">
    <div class="login-title">
      <img src="@/assets/logo.png" />
      <span>PAY管理系统</span>
    </div>
    <vxe-form
      v-bind="formOptions"
      v-on="formEvents"
      class="login-form"
    >
      <!-- 手机号输入 -->
      <template #phone>
        <vxe-form-item
          field="phone"
          :rules="[{ required: true, message: '请输入手机号' }]"
        >
          <!-- 使用类型断言确保 formOptions.data 存在 -->
          <vxe-input
            v-model="(formOptions.data as FormDataVO).phone"
            placeholder="请输入手机号码"
            clearable
          ></vxe-input>
        </vxe-form-item>
      </template>

      <!-- 密码输入 -->
      <template #password>
        <vxe-form-item
          field="password"
          :rules="[{ required: true, message: '请输入密码' }]"
        >
          <!-- 使用类型断言确保 formOptions.data 存在 -->
          <vxe-input
            v-model="(formOptions.data as FormDataVO).password"
            type="password"
            placeholder="请输入密码"
            clearable
          ></vxe-input>
        </vxe-form-item>
      </template>

      <!-- 图形验证码 -->
      <template #captcha>
        <vxe-form-item
          field="captcha"
          :rules="[{ required: true, message: '请输入图形验证码' }]"
        >
          <vxe-row>
            <vxe-col span="16">
              <!-- 使用类型断言确保 formOptions.data 存在 -->
              <vxe-input
                v-model="(formOptions.data as FormDataVO).captcha"
                placeholder="请输入图形验证码"
                clearable
              ></vxe-input>
            </vxe-col>
            <vxe-col span="8" class="captcha-img">
              <img 
                :src="captchaUrl" 
                @click="refreshCaptcha"
                style="height: 40px; cursor: pointer;"
              >
            </vxe-col>
          </vxe-row>
        </vxe-form-item>
      </template>

      <!-- 提交按钮 -->
      <template #submitAction>
        <vxe-button type="submit" status="primary" style="width: 100%">
          立即登录
        </vxe-button>
      </template>
    </vxe-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { VxeFormProps, VxeFormListeners } from "vxe-pc-ui";
import { useUserStore } from "@/store/user";

const router = useRouter();
const userStore = useUserStore();

// 图形验证码URL
const captchaUrl = ref('/api/captcha?' + Date.now())

interface FormDataVO {
  phone: string;
  password: string;
  captcha: string;
}

const formOptions = reactive<VxeFormProps<FormDataVO>>({
  loading: false,
  data: {
    phone: "",
    password: "",
    captcha: "",
  },
  rules: {
    phone: [
      { required: true, message: '请输入手机号' },
      { 
        pattern: /^1[3-9]\d{9}$/, 
        message: '请输入正确的11位手机号码' 
      }
    ],
    password: [
      { required: true, message: '请输入密码' },
      { 
        min: 6, 
        max: 20, 
        message: '密码长度在6-20个字符之间' 
      }
    ],
    captcha: [
      { required: true, message: '请输入图形验证码' },
      { 
        pattern: /^[A-Za-z0-9]{4}$/, 
        message: '验证码为4位字母或数字' 
      }
    ]
  },
  items: [
    { field: 'phone', span: 24, slots: { default: 'phone' } },
    { field: 'password', span: 24, slots: { default: 'password' } },
    { field:'',span: 24, slots: { default: 'captcha' } },
    { span: 24, slots: { default: 'submitAction' } }
  ]
});

// 刷新图形验证码
const refreshCaptcha = () => {
  captchaUrl.value = `/api/captcha?t=${Date.now()}`
}

const formEvents: VxeFormListeners<FormDataVO> = {
  submit({ data }) {
    formOptions.loading = true;
    userStore
      .loginServer(data)
      .then(() => {
        router.push("/");
      })
      .finally(() => {
        formOptions.loading = false;
      });
  },
};
</script>

<style scoped>
.login-title {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px 10px 0 0;
  width: 500px;
  padding: 20px;
  text-align: center;
  font-size: 24px;
}

.login-form {
  border-radius: 0 0 10px 10px;
  background-color: rgba(255, 255, 255, 0.8);
  width: 500px;
  padding: 30px 50px;
}

.captcha-img {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 10px;
}

.vxe-form-item {
  margin-bottom: 20px;
}
</style>